<template>
  <div class="layout" :style="containerStyle">
    <div class="background">
      <div v-if="res.list[0].img" class="from-img">
        <img :src="res.list[0].img" alt="" />
      </div>
      <div :class="['run-text', !res.list[0].img ? 'full-width' : '']">
        <auto-scroll :data="list" :mode="res.list[0].direction" class="scroller-view"> </auto-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import AutoScroll from '@/components/u_views/u-auto-scroll/index.vue'

export default {
  title: '公告',
  components: {
    AutoScroll
  },
  props: ['res'],
  computed: {
    containerStyle() {
      let style = {}
      let curItem = this.res.list[0]
      if (curItem && curItem.bk_color) {
        style['backgroundColor'] = curItem.bk_color
      }
      if (curItem && curItem.bk_img) {
        style['background-image'] = `url(${curItem.bk_img})`
        style['background-repeat'] = 'no-repeat'
        style['background-position'] = 'center'
        style['background-size'] = '100% 100%'
      }
      if (curItem && curItem.color) {
        style['color'] = curItem.color
      }
      // if (curItem && !curItem.img) {
      //   style['padding'] = '0 10px'
      // }
      return style
    },
    list() {
      let data = []
      let curItem = this.res.list[0]
      if(curItem) {
        data = curItem.title.map(i => i.context)
      }
      return data
    }
  },
  data() {
    return {
      scrollStyle: {
        height: '24px'
      }
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
@import './tpl.scss';

.layout {
  height: 30px;
}

.background {
  z-index: 2;
  width: 100%;
  height: 30px;
  text-align: left;
  display: flex;
  .from-img {
    width: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .run-text {
    width: calc(100% - 30px);
  }
  .full-width {
    width: calc(100% - 0px);
  }
}
.scroller-view {
  font-size: 13px;
  margin: 0 10px;
}
</style>
